<template>
	<view class="province-box">
		<!-- <map class="map" v-show="status=='hide'" id="map" ref="map" :latitude="latitude" :longitude="longitude"
			:markers="covers" @markertap="goInfo" scale='10'></map> -->
		<view :class="['fixed-box',status]">
			<view class="fixed-top">
				<div class="fixed-search">
					<view class="uni-icon">&#xe62a;</view>
					<input class="input" type="text" placeholder="输入车牌号" @confirm="searchConfirm" v-model="searchKey" />
				</div>
				<!-- <view class="fixed-search-bg"></view> -->
			</view>
			<!-- @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" -->
			<view class="fixed-num">
				<view class="fixed-num-item color2" @click="handleType('')" v-if="tabIndex==0">
					<view class="icon">
						<view class="image">
							<image src="/static/img/car.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="num">
						{{countNum.areaVehNum || 0}}
					</view>
					<view class="text">本省车辆数</view>
				</view>
				<view class="fixed-num-item color4" @click="handleType('riskVehicleNum')" v-if="tabIndex==0">
					<view class="icon">
						<view class="image">
							<image src="/static/img/car.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="num">
						{{countNum.riskVehicleNum || 0}}
					</view>
					<view class="text">疑似有风险车辆数</view>
				</view>
				<view class="fixed-num-item color3" @click="handleType('')" v-if="tabIndex==1">
					<view class="icon">
						<view class="image">
							<image src="/static/img/car.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="num">
						{{countNum.outerAreavehNum || 0}}
					</view>
					<view class="text">外省车辆数</view>
				</view>
			</view>
			<view class="fixed-list">
				<view class="list-head">
					<view class="col col1">序号</view>
					<view class="col col2">车牌号(颜色)</view>
					<view class="col col3">所属地区</view>
				</view>
				<view class="list-body">
					<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="handleScroll">
						<view class="list-item" v-for="(item,index) in list" :key="index" @click="goInfo(item)">
							<view class="col col1">
								{{index+1}}
							</view>
							<view class="col col2">
								{{item.vehCode}}({{item.vehColor}})
							</view>
							<view class="col col3">
								{{item.areaName}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHomeAll
	} from '@/common/api/monitor.js'
	export default {
		props: ['tabIndex'],
		data() {
			return {
				vehList: [],
				resList: [],
				countNum: {
					vehNum: 0,
					areaVehNum: 0,
					outerAreavehNum: 0,
					riskVehicleNum: 0,
				},
				type: "",
				searchKey: "",
				searchKeyTemp: "",
				page: {
					current: 1,
					size: 20,
				},
				latitude: 31.861,
				longitude: 117.283,
				covers: [],
				icons: [
					"/static/img/inside.png",
					"/static/img/outer.png",
					"/static/img/danger.png",
				],
				// 屏幕触摸数据
				touch: {
					start: 0,
					end: 0,
				},
				status: 'hide',
			}
		},
		mounted() {
			this.getHomeAll()
			this._mapContext = uni.createMapContext("map", this);
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					console.log('initMarkerCluster', res)
				}
			});
		},
		computed: {
			total() {
				return this.vehList.length;
			},
			pages() {
				return Math.ceil(this.total / this.page.size);
			},
			list() {
				let end = this.page.current * this.page.size;
				return this.vehList.slice(0, end);
			},
		},
		watch: {
			tabIndex() {
				this.getHomeAll()
			}
		},
		methods: {
			// touchend(e) {
			// 	this.touch.end = e.changedTouches[0].pageY;
			// 	this.initState();
			// },
			// touchmove(e) {
			// 	this.touch.end = e.changedTouches[0].pageY;
			// },
			// touchstart(e) {
			// 	this.touch.start = e.changedTouches[0].pageY;
			// 	this.touch.end = e.changedTouches[0].pageY;
			// },

			// 计算当前状态
			initState() {
				let num = this.touch.end - this.touch.start;
				Object.assign(this.touch, {
					start: 0,
					end: 0,
				})
				if (num > 20) {
					this.status = 'hide'
				}
				if (num < -20) {
					this.status = 'show'
				}
			},
			// 过滤类型
			handleType(type) {
				this.type = type;
				this.initVehList();
			},
			// 过滤车牌号
			searchConfirm() {
				this.searchKeyTemp = this.searchKey;
				this.initVehList();
			},
			// 初始化车辆列表
			initVehList() {
				let vehList = [];
				switch (this.type) {
					case 'riskVehicleNum':
						// 风险
						vehList = this.resList.filter((item) => item.warn == "20");
						break;
					case 'outerAreavehNum':
						// 外辖区
						vehList = this.resList.filter((item) => item.slogan == "40");
						break;
					case 'areaVehNum':
						// 本辖区
						vehList = this.resList.filter((item) => item.slogan == "30");
						break;
					default:
						// 全部车辆
						vehList = this.resList;
				}
				if (this.searchKeyTemp) {
					this.vehList = vehList.filter(item => {
						return item.vehCode.indexOf(this.searchKeyTemp) != -1;
					})
				} else {
					this.vehList = vehList;
				}
				this.page.current = 1;
			},
			// 获取数据
			getHomeAll() {
				const param = {
					context: this.tabIndex == '0' ? 'province-this' : 'province-other'
				};
				getHomeAll(param).then(res => {
					const resData = res.data.data;
					// 所有省内/省外的车辆列表
					this.resList = resData.pointList;
					// 各类型数量
					Object.assign(this.countNum, {
						vehNum: resData.vehNum,
						areaVehNum: resData.areaVehNum,
						outerAreavehNum: resData.outerAreavehNum,
						riskVehicleNum: resData.riskVehicleNum,
					});
					this.initVehList();
					// this.resList.map((item, index) => {
					// 	// console.log(item)
					// 	// this.addMarkers(item)
					// 	this.covers.push({
					// 		id: (index + 1),
					// 		latitude: Number(item.latitudePoint),
					// 		longitude: Number(item.longitudePoint),
					// 		iconPath: this.icons[item.warn == '20' ? 2 : (item.slogan == '30' ? 0 :
					// 			1)],
					// 		label: {
					// 			content: item.vehCode,
					// 		},
					// 		joinCluster: true
					// 	})
					// 	this._mapContext.initMarkerCluster({
					// 		enableDefaultStyle: false, // 是否启用默认的聚合样式(是否用自定义图标)
					// 		zoomOnClick: true,
					// 		gridSize: 60,
					// 		complete(res) {
					// 			console.log('initMarkerCluster', res)
					// 		}
					// 	}); 
					// 	this.status = 'hide';
					// })

				})
			},
			// 点击车辆
			goInfo(item) {
				const param = {
					vehCode: item.vehCode,
					context: this.tabIndex == 0 ? 'province-this' : 'province-other',
					vehColor: item.vehColor,
				}

				const lastTime = {
					speed: item.speed,
					lastGpsTime: item.lastGpsTime,
					latitudePoint: item.latitudePoint,
					longitudePoint: item.longitudePoint
				}
				this.$goBack('./carMonitorInfo?param=' + JSON.stringify(param) + '&lastTime=' + JSON.stringify(lastTime));
			},
			handleScroll() {
				if (this.pages >= this.page.current + 1) {
					this.page.current++;
				}
			},
			// addMarkers(item) {
			// 	this.item = item;
			// 	this.covers = [{
			// 		id: 1,
			// 		latitude: Number(item.latitudePoint),
			// 		longitude: Number(item.longitudePoint),
			// 		iconPath: this.icons[item.warn == '20' ? 2 : (item.slogan == '30' ? 0 : 1)],
			// 		label: {
			// 			content: item.vehCode,
			// 		},
			// 	}]
			// 	this.latitude = Number(item.latitudePoint);
			// 	this.longitude = Number(item.longitudePoint);
			// 	this.status = 'hide';
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.province-box {
		background: #ccc;
		position: absolute;
		height: 100%;
		overflow: hidden;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		.map {
			width: 100%;
			height: calc(100% - 264rpx);
			position: relative;
			z-index: 99;
		}

		.fixed-box {
			// position: absolute;
			// z-index: 999;
			// width: 100%;
			height: 96%;
			// overflow: auto;
			// top: calc(100% - 264rpx);
			// display: flex;
			// flex-direction: column;

			&.show {
				top: 0;
			}

			// top的高度是84rpx
			.fixed-top {
				position: relative;
				background: #fff;
				padding: 10px 0;

				.fixed-search-bg {
					background: #fff;
					position: absolute;
					z-index: 1;
					bottom: 0;
					width: 100%;
					height: 50%;
					left: 0;
				}

				.fixed-search {
					margin: 0 20rpx;
					position: relative;
					z-index: 2;
					background: #fff;
					border-radius: 12rpx;
					// box-shadow: 0 0 12rpx rgba(0, 0, 0, .3);
					display: flex;
					align-items: center;
					padding: 12rpx 20rpx;
					border: 1px rgba(0, 0, 0, .3) solid;

					.uni-icon {
						color: #666;
						font-size: 60rpx;
						height: 60rpx;
					}

					.input {
						flex: 1;
						height: 60rpx;
						padding: 0 10px;
					}
				}
			}

			// num的高度是180rpx
			.fixed-num {
				display: flex;
				align-items: center;
				background: #fff;
				padding: 30rpx 20rpx;

				.fixed-num-item {
					flex: 1;
					display: flex;
					align-items: center;

					.icon {

						.image {
							background-color: #fcac33;
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							border: 10rpx solid #f6e4ca;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 70rpx;
								height: 70rpx;
							}
						}

					}

					.num {
						color: #fda116;
						padding: 0 10rpx;
					}

					.text {
						font-size: 30rpx;
						line-height: 1.5em;
					}

					&.color2 {
						.icon {

							.image {
								background-color: #37b44c;
								border-color: #c8f1d5;
							}
						}

						.num {
							color: #37b44c;
						}
					}

					&.color3 {
						.icon {

							.image {
								background-color: #20aed1;
								border-color: #c4ecfa;
							}
						}

						.num {
							color: #20aed1;
						}
					}

					&.color4 {
						.icon {

							.image {
								background-color: #eb5419;
								border-color: #f6d8e1;
							}
						}

					}
				}
			}

			.fixed-list {
				// flex: 1;
				height: 84%;
				// overflow: auto;
				// display: flex;
				// flex-direction: column;
				background: #fff;
				padding: 0 20rpx;

				.col {
					text-align: center;
					word-break: break-all;

					&.col1 {
						width: 100rpx;
					}

					&.col2 {
						flex: 1;
					}

					&.col3 {
						width: 200rpx;
					}
				}

				.list-head {
					line-height: 76rpx;
					display: flex;
					font-size: 32rpx;
					color: #333;
					background: #F5F9FE;
				}

				.list-body {
					// flex: 1;
					// overflow: hidden;
					height: 90%;

					.scroll-view {
						width: 99%;
						height: 100%;
						overflow: auto;
					}

					.list-item {
						display: flex;
						font-size: 30rpx;
						line-height: 70rpx;
						color: #555;

						&:nth-child(2n+1) {
							background: #FAFBFF;
						}
					}
				}
				
			}
		}
	}
</style>
